<script setup lang="ts">
import { computed, onBeforeMount, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GLogin, http, isArray, useI18n, useWebsiteStore } from "@gonsin/gview";
import { useUserStore } from "@/stores/user";
import { getUserEdificeKeyApi, userRegisterApi } from "@/api/user";
import { DialogPlugin, MessagePlugin } from "tdesign-vue-next";

import bgImg from "@/assets/img/bg.jpg";
import bgVideoMp4 from "@/assets/video/bg.mp4";
import bgVideoWebm from "@/assets/video/bg.webm";

import loginUser from "@/assets/svg/login-user.svg?component";
import loginLock from "@/assets/svg/login-lock.svg?component";
import browse from "@/assets/svg/browse.svg?component";
import browseOff from "@/assets/svg/browse-off.svg?component";

const { T, i18n } = useI18n();

const router = useRouter();
const userStore = useUserStore();

const route = useRoute();

const websiteStore = useWebsiteStore();

const currentLocale = computed(() => i18n.global.locale.value);

const websiteTitle = ref("");
const websiteTitleEn = ref("");

function isImageFile(filename: string) {
	// 使用正则表达式匹配常见的图片文件后缀
	const imageRegex = /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i;

	// 使用正则.test()方法检查文件名是否匹配图片文件后缀
	return imageRegex.test(filename);
}

// onBeforeMount(async () => {

// });

const loginBackgroundSrc = ref<{
	bgImgSrc?: string;
	bgVideoMp4Src?: string;
}>({});
const loginBackgroundIconSrc = ref("");

const websiteSetting = computed(() => websiteStore.websiteSetting);
const loginBackground = computed(() => websiteStore.loginBackground);
const loginBackgroundIconUrl = computed(() => websiteStore.loginBackgroundIconUrl);

const copyRight = ref("");
const copyRightInfo = ref("");

function checkIfLicense() {
	return http.get("/api/base/system/time");
}

onBeforeMount(async () => {});

watch(
	() => websiteSetting.value,
	(value) => {
		if (loginBackground.value ?? "" != "") {
			if (isImageFile(loginBackground.value)) {
				loginBackgroundSrc.value = {
					bgImgSrc: loginBackground.value,
				};
			}

			if (loginBackground.value.endsWith(".mp4")) {
				loginBackgroundSrc.value = {
					bgVideoMp4Src: loginBackground.value,
				};
			}
		} else {
			loginBackgroundSrc.value = {
				bgVideoMp4Src: bgVideoMp4,
				bgImgSrc: bgImg,
			};
		}
		document.querySelector("video")?.load();

		if (loginBackgroundIconUrl.value != "") {
			loginBackgroundIconSrc.value = loginBackgroundIconUrl.value;
		}

		if (currentLocale.value.toLowerCase() == "zh-cn") {
			if (websiteStore.title ?? "" != "") {
				websiteTitle.value = websiteStore.title;
			} else {
				websiteTitle.value = `${T.t("公信会务管理系统")}`;
			}
			if (websiteStore.titleEn ?? "" != "") {
				websiteTitleEn.value = websiteStore.titleEn;
			} else {
				websiteTitleEn.value = `Gonsin Conference affairs management system`;
			}
		} else {
			if (websiteStore.titleEn ?? "" != "") {
				websiteTitle.value = websiteStore.titleEn;
				websiteTitleEn.value = websiteStore.titleEn;
			} else {
				websiteTitle.value = `${T.t("公信会务管理系统")}`;
				websiteTitleEn.value = `Gonsin Conference affairs management system`;
			}
		}

		if (websiteStore.copyRight ?? "" != "") {
			copyRight.value = websiteStore.copyRight;
		} else {
			copyRight.value = `${T.t("Copyright 2023 All Rights Reserved. ")}`;
		}
	},
	{
		deep: true,
		immediate: true,
	},
);

const activeTab = ref("password");

const loginFormData = ref({
	username: "",
	password: "",
	edificeKey: "",
});

async function handleGetUserEdificeKey(username: string) {
	const res = await getUserEdificeKeyApi(username);

	if (res.state == 200 && isArray(res.data.data)) {
		return res.data.data;
	} else {
		return [];
		// throw res;
	}
}

const isEdificeChooseShow = ref(false);
const currentEdificeList = ref<any[]>([]);
const currentEdificeOptions = computed(() => {
	return currentEdificeList.value.map((item: any) => ({
		label: item.name,
		value: item.edificeKey,
	}));
});
function handleEdificeChooseShow(flag: boolean, edificeKeys: any[] = []) {
	if (flag) {
		isEdificeChooseShow.value = flag;
		currentEdificeList.value = edificeKeys;
		loginFormData.value.edificeKey = edificeKeys[0].edificeKey;
	} else {
		isEdificeChooseShow.value = flag;
		currentEdificeList.value = [];
	}
}

async function handleLogin() {
	await userStore.userLogin(loginFormData.value);
	const currentQuery = route.query;

	router.push({
		name: "view",
		...(Object.keys(currentQuery).length ? { query: currentQuery } : {}),
	});
}

const edificeSubmitLoadingFlag = ref(false);
async function handleEdificeSubmit() {
	edificeSubmitLoadingFlag.value = true;
	try {
		if (loginFormData.value.edificeKey) {
			const res = await handleLogin();
		} else {
			const loginErrorDialog = DialogPlugin.alert({
				theme: "warning",
				header: `${T.t("提示")}`,
				body: `${T.t("组织/团队不能为空！")}`,
				confirmBtn: `${T.t("确认")}`,
				className: "login__dialog",
				onConfirm: () => {
					loginErrorDialog.destroy();
				},
				onClose: () => {
					loginErrorDialog.destroy();
				},
			});
		}
	} catch (e: any) {
		MessagePlugin.closeAll();

		const loginErrorDialog = DialogPlugin.alert({
			theme: "warning",
			header: `${T.t("提示")}`,
			body: `${e.message}`,
			confirmBtn: `${T.t("确认")}`,
			className: "login__dialog",
			onConfirm: () => {
				loginErrorDialog.destroy();
			},
			onClose: () => {
				loginErrorDialog.destroy();
			},
		});
	} finally {
		edificeSubmitLoadingFlag.value = false;
	}
}

let loginLoadingFlag = ref(false);
async function handleLoginSubmit() {
	loginLoadingFlag.value = true;

	try {
		if (loginFormData.value.username && loginFormData.value.password) {
			const res = await handleLogin();
		} else {
			const loginErrorDialog = DialogPlugin.alert({
				theme: "warning",
				header: `${T.t("提示")}`,
				body: `${T.t("用户id和密码不能为空！")}`,
				confirmBtn: `${T.t("确认")}`,
				className: "login__dialog",
				onConfirm: () => {
					loginErrorDialog.destroy();
				},
				onClose: () => {
					loginErrorDialog.destroy();
				},
			});
		}
	} catch (e: any) {
		MessagePlugin.closeAll();

		const loginErrorDialog = DialogPlugin.alert({
			theme: "warning",
			header: `${T.t("提示")}`,
			body: `${e.message}`,
			confirmBtn: `${T.t("确认")}`,
			className: "login__dialog",
			onConfirm: () => {
				loginErrorDialog.destroy();
			},
			onClose: () => {
				loginErrorDialog.destroy();
			},
		});
	} finally {
		loginLoadingFlag.value = false;
	}
}

function handleFind() {
	const confirmFind = DialogPlugin.alert({
		theme: "info",
		header: `${T.t("提示")}`,
		body: `${T.t("请联系管理员找回 ID 或密码！")}`,
		confirmBtn: `${T.t("确认")}`,
		className: "login__dialog",
		onConfirm: () => {
			confirmFind.destroy();
		},
	});
}

const registerFormRef = ref();
const isRegisterFormShow = ref(false);
function handleRegisterFormShow(flag: boolean) {
	isRegisterFormShow.value = flag;

	if (!flag) {
		registerFormRef.value.reset();
		registerFormRef.value.clearValidate();
	}
}

const registerFormData = ref({
	username: "",
	password: "",
	checkPassword: "",
	name: "",
	edificeName: "",
	edificeAddress: "",
	phone: "",
});

const registerFormRules = {
	username: [
		{ required: true, message: T.t("账户名称必填"), type: "error", trigger: "blur" },
		{
			pattern: /^[a-zA-Z][a-zA-Z0-9_]{2,16}$/,
			message: T.t("用户名以字母开头，只能包含大小写字母数字与下划线"),
			type: "error",
			trigger: "blur",
		},
		{ min: 3, message: T.t("用户名的长度不能小于 3 位"), type: "error", trigger: "blur" },
		{ max: 16, message: T.t("用户名的长度不能大于 16 位"), type: "error", trigger: "blur" },
	],
	password: [
		{ required: true, message: T.t("密码必填"), type: "error", trigger: "blur" },
		{ min: 6, message: T.t("密码的长度不能少于 6 位"), type: "error", trigger: "blur" },
		{ max: 32, message: T.t("密码的长度不能大于 32 位"), type: "error", trigger: "blur" },
		{
			pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,32}$/,
			message: T.t("密码必须包含大小写字母与数字"),
			type: "error",
			trigger: "blur",
		},
		{
			pattern: /^[a-zA-Z0-9!@#$%^&*()]+$/,
			message: `${T.t("密码只能为大小写字母、数字以及特殊字符")}!@#$%^&*()`,
			type: "error",
			trigger: "blur",
		},
	],
	checkPassword: [
		{ required: true, message: T.t("确认密码必填"), type: "error", trigger: "blur" },
		{
			validator: () => {
				return registerFormData.value.password === registerFormData.value.checkPassword;
			},
			message: T.t("两次输入的密码不一致"),
			trigger: "blur",
		},
		{ min: 6, message: T.t("密码的长度不能少于 6 位"), trigger: "blur" },
		{ max: 32, message: T.t("密码的长度必须是 6-32 位"), trigger: "blur" },
		{
			pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,32}$/,
			message: T.t("密码必须包含大小写字母与数字"),
			type: "error",
			trigger: "blur",
		},
		{
			pattern: /^[a-zA-Z0-9!@#$%^&*()]+$/,
			message: `${T.t("密码只能为大小写字母、数字以及特殊字符")}!@#$%^&*()`,
			type: "error",
			trigger: "blur",
		},
	],
	name: [
		{ required: true, message: T.t("显示用户姓名必填"), type: "error", trigger: "blur" },
		{
			pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
			message: T.t("用户姓名只能为中文、大小写字母、数字"),
			trigger: "blur",
		},
	],
	edificeName: [{ required: true, message: T.t("公司名字必填"), type: "error", trigger: "blur" }],
	phone: [
		{ required: true, message: T.t("手机号码必填"), type: "error", trigger: "blur" },
		{
			pattern: /^[0-9]+$/,
			message: T.t("请输入正确的手机号码"),
			type: "error",
			trigger: "blur",
		},
	],
};

let registerLoadingFlag = ref(false);
function handleRegisterSubmit() {
	registerLoadingFlag.value = true;
	registerFormRef.value.validate().then(async (result: any[]) => {
		if (!Object.keys(result).length) {
			const res = await userRegisterApi(registerFormData.value);

			if (res.state == 200) {
				const registerSuccessDialog = DialogPlugin.alert({
					theme: "success",
					header: `${T.t("提示")}`,
					body: `${T.t("注册成功！")}`,
					confirmBtn: `${T.t("确认")}`,
					className: "login__dialog",
					onConfirm: () => {
						handleRegisterFormShow(false);
						registerSuccessDialog.destroy();
					},
					closeBtn: false,
				});
			} else {
				MessagePlugin.closeAll();

				const registerErrorDialog = DialogPlugin.alert({
					theme: "danger",
					header: `${T.t("提示")}`,
					body: `${res.message}`,
					className: "login__dialog",
					onConfirm: () => {
						// handleRegisterFormShow(false);
						registerErrorDialog.destroy();
					},
					confirmBtn: `${T.t("返回")}`,
					closeBtn: false,
				});
			}
		} else {
			const firstError = Object.values(result)[0]?.filter(
				(item: any) => item.result === false,
			)[0]?.message;
			MessagePlugin.error(`${firstError}`);
		}
	});
	registerLoadingFlag.value = false;
}
</script>

<template>
	<GLogin
		:title="websiteTitle"
		:subTitle="websiteTitleEn"
		v-bind="loginBackgroundSrc"
		:copyrightLogoSrc="loginBackgroundIconSrc"
		:copyrightInfoEng="copyRight"
		:copyrightInfoCN="`<a href='https://beian.miit.gov.cn' target='_blank'>
					${copyRightInfo}
		</a>`"
	>
		<template #tabs>
			<t-tabs defaultValue="password" v-model="activeTab">
				<t-tab-panel value="password" :label="T.t(`帐号登录`)">
					<t-form
						class="login__form"
						ref="loginForm"
						:data="loginFormData"
						@submit="handleLoginSubmit"
						label-width="0"
					>
						<t-form-item name="username">
							<t-input
								class="login__form--input"
								v-model="loginFormData.username"
								size="large"
								:placeholder="T.t('请输入账户名称')"
								clearable
							>
								<template #prefix-icon>
									<loginUser class="login__form--icon" />
								</template>
							</t-input>
						</t-form-item>
						<t-form-item name="password">
							<t-config-provider
								:global-config="{
									icon: {
										BrowseOffIcon: browseOff,
										BrowseIcon: browse,
									},
								}"
							>
								<t-input
									class="login__form--input"
									v-model="loginFormData.password"
									size="large"
									type="password"
									:placeholder="T.t('请输入密码')"
									clearable
								>
									<template #prefix-icon>
										<loginLock class="login__form--icon" />
									</template>
								</t-input>
							</t-config-provider>
						</t-form-item>
						<div class="login__form--button">
							<t-form-item class="login__form--button-item">
								<t-space size="0">
									<!-- <t-link hover="color" @click="handleRegisterFormShow(true)">{{
										T.t("注册帐号")
									}}</t-link>
									<template #separator>
										<t-divider layout="vertical" />
									</template> -->
									<t-link hover="color" @click="handleFind">{{
										T.t("找回密码")
									}}</t-link>
								</t-space>
							</t-form-item>

							<t-form-item class="login__form--button-item">
								<t-button
									size="large"
									block
									type="submit"
									:loading="loginLoadingFlag"
									>{{ T.t("登录") }}</t-button
								>
							</t-form-item>
						</div>
					</t-form>
				</t-tab-panel>
				<!-- <t-tab-panel value="message" :label="T.t('短信登录')"  > </t-tab-panel>
				<t-tab-panel value="other" :label="T.t('其他登录')" :disabled="true"> </t-tab-panel> -->
			</t-tabs>
		</template>
	</GLogin>

	<t-dialog
		class="register__dialog"
		:visible="isRegisterFormShow"
		@close="handleRegisterFormShow(false)"
		width="600px"
		:header="T.t('账户注册')"
	>
		<template #body>
			<t-form
				ref="registerFormRef"
				class="register__form"
				:data="registerFormData"
				:rules="registerFormRules"
			>
				<t-form-item name="username" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('账户名称')">
						<t-input
							class="register__form--input"
							:placeholder="T.t('请输入账户名称')"
							v-model="registerFormData.username"
							autocomplete="off"
							clearable
						/>
					</t-input-adornment>
				</t-form-item>
				<t-form-item name="password" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('密码')">
						<t-config-provider
							:global-config="{
								icon: {
									BrowseOffIcon: browseOff,
									BrowseIcon: browse,
								},
							}"
						>
							<t-input
								type="password"
								class="register__form--input"
								:placeholder="T.t('请输入密码')"
								v-model="registerFormData.password"
								autocomplete="off"
								clearable
							/>
						</t-config-provider>
					</t-input-adornment>
				</t-form-item>
				<t-form-item name="checkPassword" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('确认密码')">
						<t-config-provider
							:global-config="{
								icon: {
									BrowseOffIcon: browseOff,
									BrowseIcon: browse,
								},
							}"
						>
							<t-input
								type="password"
								class="register__form--input"
								:placeholder="T.t('请输入确认密码')"
								v-model="registerFormData.checkPassword"
								autocomplete="off"
								clearable
							/>
						</t-config-provider>
					</t-input-adornment>
				</t-form-item>

				<t-form-item name="name" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('姓名')">
						<t-input
							class="register__form--input"
							:placeholder="T.t('请输入显示用户姓名')"
							v-model="registerFormData.name"
							autocomplete="off"
							clearable
						/>
					</t-input-adornment>
				</t-form-item>
				<t-form-item name="edificeName" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('公司名字')">
						<t-input
							class="register__form--input"
							:placeholder="T.t('请输入公司名字')"
							v-model="registerFormData.edificeName"
							autocomplete="off"
							clearable
						/>
					</t-input-adornment>
				</t-form-item>
				<t-form-item name="edificeAddress" labelWidth="0">
					<t-input-adornment :prepend="T.t('公司地址')">
						<t-input
							class="register__form--input"
							:placeholder="T.t('请输入公司地址')"
							v-model="registerFormData.edificeAddress"
							autocomplete="off"
							clearable
						/>
					</t-input-adornment>
				</t-form-item>
				<t-form-item name="phone" required="true" labelWidth="0">
					<t-input-adornment :prepend="T.t('手机号码')">
						<t-input
							class="register__form--input"
							:placeholder="T.t('请输入手机号码')"
							v-model="registerFormData.phone"
							autocomplete="off"
							clearable
						/>
					</t-input-adornment>
				</t-form-item>
			</t-form>
		</template>

		<template #footer>
			<t-button
				size="large"
				theme="primary"
				style="width: 140px"
				:loading="registerLoadingFlag"
				@click="handleRegisterSubmit"
			>
				{{ T.t("提交注册") }}
			</t-button>
		</template>
	</t-dialog>

	<t-dialog
		class="register__dialog"
		:visible="isEdificeChooseShow"
		@close="handleEdificeChooseShow(false)"
		width="500px"
		:header="T.t('请选择组织/团队')"
	>
		<template #body>
			<t-form class="register__form">
				<t-form-item labelWidth="0">
					<t-select
						class="register__form--select"
						size="large"
						v-model="loginFormData.edificeKey"
						:placeholder="`${T.t('请选择组织/团队')}`"
						:options="currentEdificeOptions"
						:popupProps="{
							overlayInnerClassName: 'register__form--select-popup',
						}"
						theme-mode="dark"
					></t-select>
				</t-form-item>
			</t-form>
		</template>
		<template #footer>
			<t-button
				size="large"
				theme="primary"
				style="width: 140px"
				:loading="edificeSubmitLoadingFlag"
				@click="handleEdificeSubmit"
			>
				{{ T.t("登录") }}</t-button
			>
		</template>
	</t-dialog>
</template>

<style lang="scss">
@import "./dark.scss";
@import "./font.scss";
.login {
	&__form {
		padding: 20px 30px;
		border-bottom: 1px solid rgb(255 255 255 / 10%);
		&--input {
			// 设置输入框自动填充的延迟属性
			input:-webkit-autofill,
			input:-webkit-autofill:hover,
			input:-webkit-autofill:focus,
			input:-webkit-autofill:active {
				transition: color 99999s ease-out, background-color 99999s ease-out;
				transition-delay: 99999s;
			}

			// 设置填充色为透明
			input:-webkit-autofill {
				box-shadow: 0 0 0 1000px transparent inset !important;
				-webkit-text-fill-color: #ededed !important;
			}
			input:-internal-autofill-selected {
				box-shadow: inset 0 0 0 1000px transparent !important; // 改变了背景色
				-webkit-text-fill-color: #ededed !important;
			}
			.t-input {
				width: 340px;
				font: var(--td-font-body-medium);
				color: #ffffff;
				background-color: rgb(0 12 39 / 80%);
				border-color: transparent;
				box-shadow: none;
				caret-color: rgb(255 255 255 / 50%);
			}
			.t-input--focused {
				border-color: var(--td-brand-color);
				.login__form--icon {
					> *:last-child {
						fill: #bbd3fb !important;
					}
				}
			}
			.t-form__item {
				margin-bottom: 10px;
			}
			::placeholder {
				color: rgb(255 255 255 / 30%);
			}
			.t-input__inner {
				color: #ffffff !important;
				background-color: transparent !important;
			}
			.t-input .t-input__suffix > .t-icon {
				color: rgb(255 255 255 / 30%);
			}
			.t-input__extra {
				top: 18%;
				right: 10%;
				z-index: 999;
				font: var(--td-font-body-large);
				text-align: right;
				pointer-events: none;
			}
		}
		&--button {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20px;
			.t-form__item {
				margin-bottom: 0;
			}
			&-item {
				flex: 1;
				margin-bottom: 0;
				&:first-child {
					margin-right: 10px;
				}
				.t-space {
					align-items: center;
					margin: 0 auto;
					.t-divider {
						height: 1.5em;
						border-color: #ffffff4d;
					}
				}
				.t-link {
					font-size: 12px;
					color: #ffffff4d;

					// text-align: center;

					// text-decoration: underline;
					// text-underline-offset: 5px;
					&::after {
						border-color: #ffffff4d;
					}
				}
			}
		}
	}
	&__dialog {
		.t-dialog {
			font: var(--td-font-body-large);
			color: #ffffff;
			text-align: center;
			background-color: rgb(0 0 0 / 50%);
			border: none;
		}
		.t-dialog__header,
		.t-dialog {
			color: #ffffff;
		}
		.t-dialog__header {
			font: var(--td-font-title-large);
		}
		.t-dialog__close {
			width: 24px;
			height: 24px;
			font-size: 24px;
			color: #ffffff;
			&:hover {
				background: #000000;
			}
		}
	}
}
.register {
	&__dialog {
		.t-dialog__mask {
			background: rgb(0 0 0 / 10%);

			// backdrop-filter: blur(2px);
		}
		.t-dialog {
			font: var(--td-font-body-large);
			color: #ffffff;
			background: #000c2780;
			border: none;
			border-radius: 6px;
		}
		.t-dialog__header,
		.t-dialog {
			color: #ffffff;
		}
		.t-dialog__header {
			font: var(--td-font-title-large);
			.t-dialog__header-content {
				padding: 20px 0;
			}
		}
		.t-dialog__close {
			align-self: flex-start;
			width: 24px;
			height: 24px;
			font-size: 24px;
			color: #ffffff;
			&:hover {
				background: #000000;
			}
		}
		.t-dialog__body {
			overflow: hidden;
		}
		.t-dialog__footer {
			position: relative;
			display: flex;
			justify-content: center;
			padding-top: 23px;
			margin-top: 20px;
			&::before {
				position: absolute;
				top: 0;
				width: 100%;
				content: "";
				border-bottom: 1px solid #ffffff1a;
			}
		}
	}
	&__form {
		.t-form__controls-content {
			justify-content: center;
		}
		.t-form__item {
			margin-bottom: var(--td-comp-margin-xl);
			.t-is-error {
				.t-input__extra {
					left: 174px;
				}
				.t-input-adornment {
					border-color: var(--td-error-color);
				}
				.t-form__controls-content .t-input {
					border-color: transparent;
				}
				.t-form__controls-content .t-input--focused {
					box-shadow: none;
				}
			}
		}
		[required="true"] {
			.t-input-adornment__text {
				position: relative;
				&::before {
					position: absolute;
					left: -3px;
					content: "*";
				}
			}
		}
		.t-input-adornment {
			padding: 5px;
			background: #0000004d;
			border-color: transparent;
			border-style: solid;
			border-width: 1px;
			border-radius: 4px;
			box-shadow: none;
			transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
				box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
			&:has(.t-is-focused) {
				border-color: var(--td-brand-color);
			}
			&__prepend {
				width: 150px;
				word-break: normal;
				background-color: transparent;
			}
			&__text {
				margin-left: 15px;
				color: #bbd3fb;
				background-color: transparent;
				border: none;
			}
		}
		&--input {
			// 设置输入框自动填充的延迟属性
			input:-webkit-autofill,
			input:-webkit-autofill:hover,
			input:-webkit-autofill:focus,
			input:-webkit-autofill:active {
				transition: color 99999s ease-out, background-color 99999s ease-out;
				transition-delay: 99999s;
			}
			input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 1000px #08101f inset !important;
				box-shadow: 0 0 0 1000px #08101f inset !important;
				-webkit-text-fill-color: #ededed !important;
			}
			.t-input {
				width: 280px;
				font: var(--td-font-body-medium);
				color: #ffffffe6;
				background-color: transparent;
				border-color: transparent;
				box-shadow: none;
				caret-color: rgb(255 255 255 / 50%);
			}
			::placeholder {
				color: rgb(255 255 255 / 30%);
			}
			.t-input__inner {
				color: #ffffffe6 !important;
				background-color: transparent !important;
			}
			.t-input .t-input__suffix > .t-icon {
				color: rgb(255 255 255 / 30%);
			}
			.t-input__extra {
				top: 18%;
				right: 10%;
				z-index: 999;
				font: var(--td-font-body-large);
				text-align: right;
				pointer-events: none;
			}
		}
		&--select {
			.t-input {
				// width: 280px;
				font: var(--td-font-body-medium);
				color: #ffffffe6;
				background: #0000004d;
				border-color: transparent;
				border-radius: 4px;
				box-shadow: none;
				caret-color: rgb(255 255 255 / 50%);

				// &:has(.t-is-focused) {
				// 	border-color: var(--td-brand-color);
				// }
			}
			.t-select__right-icon {
				color: #ffffffe6;
			}
			::placeholder {
				color: rgb(255 255 255 / 30%);
			}
			.t-input__inner {
				color: #ffffffe6 !important;
				background-color: transparent !important;
			}
			&-popup {
				background: #0000004d;
			}
		}
	}
}
</style>
